<template>
  <SvgIcon
    v-if="type === ICON_TYPE.SVG && isString(name)"
    v-bind="{ ...$attrs, ...props }"
    :style="getWrapStyle"
    :name="name"
    class="anticon"
  />
  <component v-else :is="name" v-bind="$attrs" class="anticon" />
</template>

<script setup lang="ts">
import type { Component, CSSProperties } from 'vue'
import type { IconType } from '@/router/types'
import { ICON_TYPE } from '@/const'
import { isString } from '@/utils/type'
import SvgIcon from './svg-icon.vue'

interface IconProps {
  type?: IconType
  name?: Component | string
  size?: number | string
  color?: string
}

const props = withDefaults(defineProps<IconProps>(), {
  type: ICON_TYPE.ANT_ICON,
  size: 16,
  name: '',
})

const getWrapStyle = computed((): CSSProperties => {
  const { size, color } = props
  let fs = size
  if (isString(size)) {
    fs = parseInt(size as string, 10)
  }

  return {
    fontSize: `${fs}px`,
    color,
  }
})
</script>
